<html>
<head>
    <title>商品管理sys</title>
    <#include "/header.html">
    <link rel="stylesheet" href="${request.contextPath}/statics/plugins/datepicker/datepicker3.css" />
    <script src="${request.contextPath}/statics/plugins/datepicker/bootstrap-datepicker.js"></script>
    <script src="${request.contextPath}/statics/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>

    <link rel="stylesheet" href="${request.contextPath}/statics/plugins/datetimepicker/bootstrap-datetimepicker.css">
    <script src="${request.contextPath}/statics/plugins/datetimepicker/bootstrap-datetimepicker.js"></script>
    <script src="${request.contextPath}/statics/plugins/datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js"></script>

    <script src="${request.contextPath}/statics/js/administrativearea.js"></script>

    <style>
        html {
            overflow-y: scroll;
        }
    </style>


</head>
<body>
<div id="rrapp" v-cloak  >
    <div v-show="showList">
        <h3>日期datepicker</h3>
        <div class="panel panel-default">
            <div class="panel-body">
                <form class="form-inline">
                    年月日：
                    <div class="input-group date" id="datepicker_year_month_day" >
                        <input id="datepicker_year_month_day_input" type="text" class="form-control">
                    </div>
                    年月：
                    <div class="input-group" id="datepicker_year_month" >
                        <input id="datepicker_year_month_input" type="text" class="form-control"  >
                    </div>
                    年月区间：
                    <div class="input-daterange input-group" id="datepicker_range" >
                        <input id="datepicker_start" type="text" class="form-control" style="width: 100px;" name="start" readonly/>
                        <span class="input-group-addon">至</span>
                        <input id="datepicker_end" type="text" class="form-control" style="width: 100px;" name="end" readonly/>
                    </div>
                    <a class="btn btn-primary" @click="getDate" >获取时间</a>
                    https://github.com/uxsolutions/bootstrap-datepicker
                </form>
            </div>
        </div>

        <h3>日期datetimepicker</h3>
        <div class="panel panel-default">
            <div class="panel-body">
                <form class="form-inline">
                    <div class="input-group date form_date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                        <input class="form-control settime-input" type="text" :value="setTime">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                    </div>
                    <a class="btn btn-primary" @click="getDateDefind" >获取时间</a>
                    http://www.bootcss.com/p/bootstrap-datetimepicker/
                </form>
            </div>
        </div>

        <h3>窗口</h3>
        <div class="panel panel-default">
            <div class="panel-body">
                <form class="form-inline">
                    <a class="btn btn-primary" @click="add" ><i class="fa fa-plus"></i>&nbsp;模态窗口</a>
                </form>
            </div>
        </div>

        <h3>excel导入导出</h3>
        <div class="panel panel-default">
            <div class="panel-body">
                用户管理中的"导出"功能，商品管理中的"导入"功能
            </div>
        </div>

        <h3>加载数据字典</h3>
        <div class="panel panel-default">
            <div class="panel-body">

                <div class="col-sm-8">
                    <select v-model="selected" class="form-control">
                        <option v-for="option in options.status"  :value="option.value">
                            {{ option.text }}
                        </option>
                    </select>
                    <span class="help-block">注意：data中声明的"selected:null"不能跟数据请求后的默认赋值相同，不然vue不刷新界面</span>
                </div>
            </div>
        </div>

        <h3>多级联动</h3>
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="form-inline">
                    <select v-model="prov" class="form-control">
                        <option v-for="option in arr" :value="option.name">
                            {{ option.name }}
                        </option>
                    </select>
                    <select v-model="city" class="form-control">
                        <option v-for="option in cityArr" :value="option.name">
                            {{ option.name }}
                        </option>
                    </select >
                    <select v-model="district" v-if="district" class="form-control">
                        <option v-for="option in districtArr" :value="option.name">
                            {{ option.name }}
                        </option>
                    </select>
                </div>
            </div>
        </div>

        <h3>tab页切换</h3>
        <div class="panel panel-default">
            <div class="panel-body">
                <a class="btn btn-default" @click="addTabs" ><i class="fa fa-search"></i>&nbsp;打开商品管理</a>
            </div>
        </div>

        <h3>文件上传</h3>
        <div class="panel panel-default">
            <div class="panel-body">
                <label for="upload" class="btn btn-primary"><i class="fa fa-plus"></i>&nbsp;上传</label>
                <input type="file" id="upload" name="upload" style="display:none" v-on:input="exportExcel" accept="*"/>
            </div>
        </div>

        <h3>文件下载</h3>
        <div class="panel panel-default">
            <div class="panel-body">
                <a class="btn btn-default" href="${request.contextPath}/statics/download/goods.xlsx"><i class="fa fa-download"></i>&nbsp;普通下载</a>
                <a class="btn btn-default" @click="downLoadFile" ><i class="fa fa-download"></i>&nbsp;POST下载</a>
            </div>
        </div>

        <h3>echart图表</h3>
        <div class="panel panel-default">
            <div class="panel-body">
                请查看"<a  @click="addTabs" >商品管理</a>"中图表
            </div>
        </div>


    </div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    {{title}}
                </h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" >
                    <div class="form-group">
                        <div class="col-sm-2 control-label" >商品名</div>
                        <div class="col-sm-10" >
                            <input type="text" class="form-control" v-model="goods.name" placeholder="商品名"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2 control-label" >介绍</div>
                        <div class="col-sm-10" >
                            <input type="text" class="form-control" v-model="goods.intro" placeholder="介绍"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2 control-label" >价格</div>
                        <div class="col-sm-10" >
                            <input type="text" class="form-control" v-model="goods.price" placeholder="价格"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2 control-label" >数量</div>
                        <div class="col-sm-10" >
                            <input type="text" class="form-control" v-model="goods.num" placeholder="数量"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <input type="button" class="btn btn-primary" value="确定"/>
                <button type="button" class="btn btn-warning" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

</div>

<script src="${request.contextPath}/statics/js/modules/demo/form.js?_${.now?long}"></script>
</body>
</html>